<template>
    <van-nav-bar
        title="中介举报"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
    <van-tabs v-model:active="active" sticky class="my-tabs" @change="onTabChange">
        <van-tab title="举报" >
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad1"
            >
                <van-cell
                    v-for="report in reportList"
                >
                    <van-row>
                        <div class="card">
                            <div class="avatar-section">
                                <van-image class="avatar-image" :src="report.user ? report.user.avatar : 'default-avatar-url.png'" round />
                                <div class="user-info">
                                    <p class="username">{{ report.user ? report.user.nickname : '匿名用户' }}</p>
                                    <p class="report-count">累计被举报：{{ report.count }}次</p>
                                </div>
                                <div class="report-status">
                                    <p v-if="report.state === 3">平台审核中...</p>
                                    <p v-else-if="report.state === 1">举报成功</p>
                                    <p v-else-if="report.state === 2">举报失败</p>
                                </div>
                            </div>
                            <div class="info-section">
                                <div class="report-reason">举报原因：{{ report.info }}</div>
                                <div class="note">备注暂无...</div>
                                <div class="contact" v-if="report.state === 2">
                                    如有任何疑问可联系客服：<a href="tel:8208208820">820-820-8820</a>
                                </div>
                            </div>
                        </div>
                    </van-row>
                </van-cell>
            </van-list>
        </van-tab>
        <van-tab title="被举报">
            <p class="total-report-count" v-if="bereportList && bereportList.length">累计被举报：{{ bereportList[0].count }}次</p>
            <div v-if="!bereportList || bereportList.length === 0">
                <p>还没被举报过</p>
            </div>
            <van-list
                v-if="bereportList && bereportList.length > 0"
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad2"
            >
                <van-cell
                    v-for="report in bereportList"
                    :key="report.reportId"
                >
                    <div class="report-card">
                        <p class="report-date">{{ report.bereportDate ? report.bereportDate : '2020-9-9' }}</p>
                        <p class="report-reason">举报原因：{{ report.info }}</p>
                    </div>
                </van-cell>
            </van-list>
        </van-tab>
    </van-tabs>
</template>
<script setup>
import {ref} from "vue";
import {get} from "../../util/request.js";
import {showToast} from "vant";
const onClickLeft = () => history.back();
const active = ref(0);
const reportList = ref([])
const bereportList = ref([])
const loading = ref(false);
const finished = ref(false);
const onTabChange=(index)=> {
    if (index === 0) {
        onLoad1();
    }

    if (index === 1) {
        onLoad2();
    }
}
const onLoad1 = () => {
    loading.value = true; // 设置对应标签页的加载状态为true
    // 异步更新数据
    setTimeout(() => {
        get("user/report/list").then(res=>{
            if (res.code === 0){
                showToast('加载举报信息成功');
                loading.value = false; // 加载完成，设置对应标签页的加载状态为false
                finished.value = true;
                reportList.value=res.data.data
                // console.log("举报")
                // console.log(JSON.stringify(reportList.value))
            } else {
                loading.value = false; // 加载完成，设置对应标签页的加载状态为false
                finished.value = true;
                showToast('加载举报失败');
            }
        }).catch(()=>{
            loading.value = false; // 加载完成，设置对应标签页的加载状态为false
            finished.value = true;
            showToast("网络错误")
        })
    }, 200);
};
const onLoad2 = () => {
    loading.value = true; // 设置对应标签页的加载状态为true
    // 异步更新数据
    setTimeout(() => {
        get("user/beReport/list").then(res=>{
            if (res.code === 0){
                showToast('加载被举报信息成功');
                loading.value = false; // 加载完成，设置对应标签页的加载状态为false
                finished.value = true;
                bereportList.value=res.data.data
                // console.log("被举报")
                // console.log(JSON.stringify(bereportList.value))
            } else {
                loading.value = false; // 加载完成，设置对应标签页的加载状态为false
                finished.value = true;
                showToast('加载举报失败');
            }
        }).catch(()=>{
            loading.value = false; // 加载完成，设置对应标签页的加载状态为false
            finished.value = true;
            showToast("网络错误")
        })
    }, 200);
};
</script>
<style scoped>
.my-tabs {
    position: absolute; /* 使用固定定位 */
    top: 10px;
    left: 3px; /* 左侧对齐 */
    right:0;
    width: 100%; /* 宽度占满全屏 */
    z-index: 1000; /* 设置较高的z-index以确保其在其他内容之上 */
}

.card {
    display: flex;
    flex-direction: column;
    border: 1px solid #ebedf0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    height: 180px; /* 固定高度 */
    width: 100%;  /* 固定宽度 */
    box-sizing: border-box; /* 确保 padding 不影响实际尺寸 */
}

.avatar-section {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.avatar-image {
    width: 50px;
    height: 50px;
    margin-right: 16px;
}

.info-section {
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    align-items: flex-start; /* 子元素左对齐 */
}

.user-info {
    display: flex;
    align-items: flex-start; /* 子元素在交叉轴上（对于列方向是水平方向）左对齐 */
    justify-content: space-between; /* 垂直方向上，子元素之间等距分布 */
    flex-direction: column; /* 垂直排列子元素 */
}

.username{
    margin: 0;
    font-weight: bold;
    color: rgb( 21, 21, 21);
}
.report-count{
    margin: 0;
    font-size: 12px;
    color: rgb( 185, 185, 185);
}
.report-status {
    text-align: right;
    margin-bottom: 8px;
    position: absolute; /* 绝对定位 */
    top: 3px; /* 紧贴容器的顶部 */
    right: 5px; /* 紧贴容器的右侧 */
    /* 你也可以设置其他样式，比如 padding、margin（尽管在这个上下文中 margin 可能不会影响位置） */
    /* text-align: right; 这在这里是不必要的，因为元素已经定位在右侧了 */
    /*margin-bottom: 8px; !* 这个margin在顶部是无效的，因为你已经将元素定位到容器的顶部了 *!*/
    /* 但如果你想在元素内部有一些空间，你可以使用 padding-bottom */
    padding-bottom: 8px;
    font-size: 16px;
}

#pending {
    color: rgb(179, 179, 179); /* 审核中颜色 */
}

#success {
    color: rgb(0, 128, 0); /* 举报成功颜色（例如绿色）*/
}

#failure {
    color: rgb(255, 0, 0); /* 举报失败颜色（例如红色）*/
}
.report-reason, .note {
    margin-top: 8px;
    color: rgb(51, 51, 51);
}

.contact {
    margin-top: 8px;
    color: red;
}
.note {
    color: rgb(206, 206, 206);
}
.report-card {
    display: flex;
    justify-content: space-between; /* 让元素在水平方向上均匀分布 */
    align-items: center; /* 让元素在垂直方向上居中对齐 */
    margin-top: 0;
    border: 1px solid #ebedf0;
    border-radius: 2px;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    /* 如果需要，可以添加滚动条 */
    /* overflow-y: auto; */
}

.report-date,
.report-reason {
    /* 不需要设置display属性，因为它们是flex容器的子元素 */
    margin: 0;
    padding: 0; /* 如果需要，可以添加适当的内边距 */
}

.report-date {
    /* 根据需要设置左侧或其他样式 */
    text-align: left;
}

.report-reason {
    /* 文本右对齐 */
    text-align: right;
    /* 根据需要设置右侧或其他样式 */
}

.total-report-count{
    text-align: left;
    margin-left: 20px;
}
</style>